<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <h3>Ecosystem</h3>
    <h1>当前值是:{{count}}</h1>
    <button @click="addC">当前值+1</button>
    <button @click="decC">当前值-1</button>
    <button @click="reseta">清空数据</button>
    <div>
      <h3>hahaha</h3>
      <p>和覅然后</p>
      <p>gitlab流程</p>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created(){
    this.add()
  },
  computed:{
    ...mapState({
      count:state=>state.count.count
    })
  },
  methods:{
    ...mapMutations(['add','dec','reset']),
    addC(){
      this.add()
      // window.localStorage.setItem('count',this.count)
    },
    decC(){
      this.dec()
    },
    reseta(){
      this.reset()
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
